<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@import url(https://fonts.googleapis.com/css?family=Lato);
			body {
			  display: flex;
			  height: 100vh;
			  justify-content: center;
			  align-items: center;
			  text-align: center;
			  background: #1A1E23;
			}
			
			.btn {
			  --hue: 190;
			  --ease-in-duration: 0.25s;
			  --ease-out-duration: 0.65s;
			  --ease-out-delay: var(--ease-in-duration);
			  position: relative;
			  padding: 1rem 3rem;
			  font-size: 1rem;
			  line-height: 1.5;
			  color: white;
			  text-decoration: none;
			  background-color: hsl(var(--hue), 100%, 41%);
			  border: 1px solid hsl(var(--hue), 100%, 41%);
			  outline: transparent;
			  cursor: pointer;
			  user-select: none;
			  white-space: nowrap;
			  transition: 0.25s;
			}
			.btn:hover {
			  background: hsl(var(--hue), 100%, 31%);
			}
			.btn-primary {
			  --hue: 171;
			}
			.btn-ghost {
			  color: hsl(var(--hue), 100%, 41%);
			  background-color: transparent;
			  border-color: hsl(var(--hue), 100%, 41%);
			}
			.btn-ghost:hover {
			  color: white;
			}
			.btn-multiple-border-stroke {
			  border-color: transparent;
			}
			.btn-multiple-border-stroke .btn-borders-group {
			  position: absolute;
			  top: 0;
			  left: 0;
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  width: 100%;
			  height: 100%;
			  border: 1px solid hsla(var(--hue), 100%, 41%, 0.35);
			}
			.btn-multiple-border-stroke .btn-borders-group:nth-child(1) {
			  left: -8px;
			  padding: 0 8px;
			}
			.btn-multiple-border-stroke .btn-borders-group:nth-child(2) {
			  top: -8px;
			  padding: 8px 0;
			}
			.btn-multiple-border-stroke .btn-borders-group:nth-child(3) {
			  top: -4px;
			  left: -4px;
			  padding: 4px;
			}
			.btn-multiple-border-stroke .btn-borders-group .border-top {
			  position: absolute;
			  top: 0;
			  width: 100%;
			  height: 1px;
			  background: hsl(var(--hue), 100%, 41%);
			  transform: scaleX(0);
			  transform-origin: left;
			}
			.btn-multiple-border-stroke .btn-borders-group .border-right {
			  position: absolute;
			  right: 0;
			  width: 1px;
			  height: 100%;
			  background: hsl(var(--hue), 100%, 41%);
			  transform: scaleY(0);
			  transform-origin: bottom;
			}
			.btn-multiple-border-stroke .btn-borders-group .border-bottom {
			  position: absolute;
			  bottom: 0;
			  width: 100%;
			  height: 1px;
			  background: hsl(var(--hue), 100%, 41%);
			  transform: scaleX(0);
			  transform-origin: left;
			}
			.btn-multiple-border-stroke .btn-borders-group .border-left {
			  position: absolute;
			  left: 0;
			  width: 1px;
			  height: 100%;
			  background: hsl(var(--hue), 100%, 41%);
			  transform: scaleY(0);
			  transform-origin: bottom;
			}
			.btn-multiple-border-stroke .btn-borders-group .border-left {
			  transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1);
			}
			.btn-multiple-border-stroke .btn-borders-group .border-bottom {
			  transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1);
			}
			.btn-multiple-border-stroke .btn-borders-group .border-right {
			  transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0);
			}
			.btn-multiple-border-stroke .btn-borders-group .border-top {
			  transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0);
			}
			.btn-multiple-border-stroke:hover {
			  color: hsl(var(--hue), 100%, 41%);
			  background: transparent;
			}
			.btn-multiple-border-stroke:hover .border-top,
			.btn-multiple-border-stroke:hover .border-bottom {
			  transform: scaleX(1);
			}
			.btn-multiple-border-stroke:hover .border-left,
			.btn-multiple-border-stroke:hover .border-right {
			  transform: scaleY(1);
			}
			.btn-multiple-border-stroke:hover .border-left {
			  transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0);
			}
			.btn-multiple-border-stroke:hover .border-bottom {
			  transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0);
			}
			.btn-multiple-border-stroke:hover .border-right {
			  transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1);
			}
			.btn-multiple-border-stroke:hover .border-top {
			  transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1);
			}
		</style>
	</head>
	<body>
		<button class="btn btn-primary btn-ghost btn-multiple-border-stroke">
		  <div class="btn-borders-group">
		    <div class="border-top"></div>
		    <div class="border-right"></div>
		    <div class="border-bottom"></div>
		    <div class="border-left"></div>
		  </div>
		  <div class="btn-borders-group">
		    <div class="border-top"></div>
		    <div class="border-right"></div>
		    <div class="border-bottom"></div>
		    <div class="border-left"></div>
		  </div>
		  <div class="btn-borders-group">
		    <div class="border-top"></div>
		    <div class="border-right"></div>
		    <div class="border-bottom"></div>
		    <div class="border-left"></div>
		  </div>
		  <span class="btn-text">Start</span>
		</button>
	</body>
</html>
